<template>
  <div id="bqan" @click="open" @click.stop="handleClickInsideMenu">
    <Icon type="md-happy" :size="25" />
  </div>

  <div
    id="bq"
    v-show="variable.bgState.value"
    @click.stop="handleClickInsideMenu"
  >
    <Tabs @on-click="dqTab">
      <TabPane
        v-for="(item, index) in variable.ExpressionType.value"
        :key="index"
        :label="item"
        :name="item"
      >
        <ul v-infinite-scroll="load" :infinite-scroll-immediate="false">
          <li
            v-for="item in variable.ExpressionList.value"
            :key="item.id"
            @click="$emit('click-emoji', `『:${item.tip}:』`)"
          >
            <Image
              :src="item.file"
              fit="contain"
              width="50px"
              height="50px"
              lazy
            >
              <template #placeholder>
                <div class="imgLoading"></div>
              </template>
            </Image>
          </li>
        </ul>
      </TabPane>
    </Tabs>
  </div>
</template>
<script setup>
const axios = inject("axios");

import variable from "../js/variable";
import { handleClickInsideMenu } from "../js/stopClosing";

let pages = 0 * 2; //总页数
let current = 1; //下拉页数
function load() {
  if (current <= pages) {
    findExpressionAdd(variable.dqType.value, current, 5);
    current++;
  }
}

//打开表情盒子
function open() {
  variable.bgState.value = !variable.bgState.value;
  if (variable.bgState.value) {
    axios
      .get("expression/findExpressionType")
      .then((response) => {
        let res = response.data;
        if (res.code == 200) {
          variable.ExpressionType.value = res.data;
          variable.dqType.value = res.data[0];
          findExpression(res.data[0], 1);
        }
      })
      .catch();
  }
}

//查询表情列表
function findExpression(type, pageNum) {
  axios
    .post("expression/findExpression", {
      type: type,
      pageNum: pageNum,
      pageSize: 20,
    })
    .then((response) => {
      let res = response.data;
      if (res.code == 200) {
        variable.ExpressionList.value = res.data.records;
        pages = res.data.pages;
      }
    })
    .catch();
}

//查询表情列表，添加新的
function findExpressionAdd(type, pageNum) {
  axios
    .post("expression/findExpression", {
      type: type,
      pageNum: pageNum,
      pageSize: 5,
    })
    .then((response) => {
      let res = response.data;
      if (res.code == 200) {
        variable.ExpressionList.value = variable.ExpressionList.value.concat(
          res.data.records
        );
        pages = res.data.pages;
      }
    })
    .catch();
}

//表情导航点击时
function dqTab(type) {
  if (type !== variable.dqType.value) {
    variable.dqType.value = type;
    findExpression(type, 1);
  }
}

defineEmits(["click-emoji"]);
</script>
<style  scoped>
#bqan {
  width: 30px;
  margin: 10px 0;
  cursor: pointer;
}

#bq {
  padding: 10px;
  width: 400px;
  height: 300px;
  box-shadow: 0 1px 5px 0 rgba(0, 0, 0, 0.2);
  border-radius: 10px;
}

ul {
  height: 230px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  overflow: auto;
}

ul::-webkit-scrollbar {
  /*隐藏滚轮*/
  display: none;
}

li {
  cursor: pointer;
  padding: 10px;
  border-radius: 10px;
  height: 75px;
  list-style: none;
}

li:hover {
  background-color: #dddddd;
}
</style>